<template>
	<view class="wrap">
		<info v-if="isError"></info>
		<view v-if="!isError">
			<view class="top">
				<view class="status">
					<uni-steps :options="stepsOptions" active-color="#07c160" :active="active" />
				</view>
			</view>


			<view class="order">
				<view class="title">
					<text>设备信息</text>
				</view>
				<view class="list clear">
					<view class="list-box clear">
						<view>设备型号：</view>
						<view class="money">{{order.xinghao}}</view>
					</view>
					<view class="list-box clear">
						<view>配件简述：</view>
						<view>{{order.device_desc}}</view>
					</view>
					<view class="list-box clear">
						<view>设备sn码：</view>
						<view class="money">{{order.sn}}</view>
					</view>
					<view class="list-box clear">
						<view>新旧程度：</view>
						<view class="money">{{order.degree}}</view>
					</view>
					<view class="list-box clear">
						<view>托管时长：</view>
						<view class="money">{{order.tg_time}}</view>
					</view>
					<view class="list-box clear">
						<view>图片：</view>
						<view class="money">
							<view style="display: flex;flex-wrap: wrap;">
								<view class="" style="flex: 1;text-align: center;" v-for="(item,index) in order.photos"
									:key="index" @click="previewImage(index)">
									<image :src="item" mode=""></image>
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="order">
				<view class="title">
					<text>订单信息</text>
				</view>
				<view class="list clear">
					<view class="list-box clear">
						<view>订单编号：</view>
						<view class="money">{{order.order_no}}</view>
					</view>
					<view class="list-box clear">
						<view>下单时间：</view>
						<view>{{order.create_time}}</view>
					</view>
					<view class="list-box clear">
						<view>订单状态：</view>
						<view class="money">{{order.order_status}}</view>
					</view>
					<view class="list-box clear">
						<view>备注：</view>
						<view class="money">{{order.remark}}</view>
					</view>
					
					<view class="list-box clear" v-if="order.kuaidi_title">
						<view>快递：</view>
						<view class="money">{{order.kuaidi_title}}</view>
					</view>
					
					<view class="list-box clear" v-if="order.kuaidi_title">
						<view>快递单号：</view>
						<view class="money">{{order.kuaidi_danhao}}</view>
					</view>
				</view>
			</view>


			<view v-if="active != 4">
				<view class="operation-placeholder"></view>
				<view class="operation">
					<text class="cancel" v-if="order.status == 0 || order.status==1" @click="cancel">取消订单</text>
					<text class="pay" v-if="order.status==1" @click="$utils.navigateTo('tuoguan/devices_fahuo',{ id: order.order_id })">立即邮寄</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import MallInfo from '@/components/tool/info.vue'
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	export default {
		components: {
			MallInfo,
			uniSteps
		},
		data() {
			return {
				isError: false,
				orderId: 0,
				active: 0,
				stepsOptions: [{
					title: '待审核'
				}, {
					title: '待邮寄'
				}, {
					title: '待收货'
				}, {
					title: '托管中'
				}],
				payment: "wechat",
				order: {
					accept_name: "",
					address: "",
					create_time: "",
					item: [],
					mobile: "",
					order_amount: "",
					order_no: "",
					pay_status: "",
					pay_type: "",
					payable_freight: '',
					payable_amount: "",
					promotions: "",
					real_amount: "",
					region: "",
					type: "",
					users_price: "0.00",
					order_status: 1
				},
				providerList: []
			};
		},
		onLoad(options) {
			this.isError = false;
			this.orderId = options.id;
			this.$http.getTgOrderDetail({
				id: this.orderId
			}).then((res) => {
				this.isError = false;
				if (res.status) {
					this.order = res.data.order;
					this.active = res.data.order.status;
				} else {
					this.isError = true;
				}
			}).catch((err) => {
				this.isError = true;
			});
		},
		// onBackPress(e) {
		// 	console.log(e);
		// 	this.$utils.navigateTo('tuoguan/device');
		// 	console.log(e);
		// 	return true;
		// },
		methods: {
			previewImage(index) {
				uni.previewImage({
					current: index, // 当前图片索引
					urls: this.order.photos // 需要预览的图片数组
				});
			},
			cancel() {
				var that = this;
				uni.showModal({
					content: '您确定要取消吗？',
					success: function (res) {
						if (res.confirm) {
							that.$utils.showLoading();
							that.$http.getTgOrderListCancel({
								order_id: that.orderId
							}).then(res => {
								that.$utils.hideLoading();
								if (res.status) {
									that.$utils.msg(res.info);
									that.$utils.navigateTo("tuoguan/devices", {
										id: 1
									});
								} else {
									that.$utils.msg(res.info);
								}
							}).catch(err => {
								that.$utils.hideLoading();
								that.$utils.msg("网络出错，请检查网络是否连接");
							});
						} else if (res.cancel) {
								
						}
					}
				});
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.shop-address {
		width: 92%;
		margin: 0 auto;
		padding: 20rpx 0 0 0;
		font-size: 28rpx;
		color: #333;

		text {
			padding-right: 20rpx;
		}
	}

	.shop-box {
		width: 100%;
		background-color: #fff;

		.qrcode {
			width: 80%;
			height: 370rpx;
			background-color: #f5eff0;
			margin: 40rpx auto 0 auto;
			border-radius: 20rpx;
			position: relative;

			image {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin: 0 auto;
				display: block;
				width: 300rpx;
				height: 300rpx;
			}
		}

		.code {
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 50rpx;
			text-align: center;
			margin: 0 auto 20rpx auto;
			background-color: #b91922;
			color: #fff;
			border-radius: 20rpx;
			position: relative;

			&:before {
				width: 34rpx;
				height: 34rpx;
				display: inline-block;
				content: " ";
				position: absolute;
				right: -18rpx;
				top: -14rpx;
				border-radius: 50%;
				background-color: #fff;
			}

			&:after {
				width: 34rpx;
				height: 34rpx;
				display: inline-block;
				content: " ";
				position: absolute;
				left: -18rpx;
				top: -14rpx;
				border-radius: 50%;
				background-color: #fff;
			}
		}
	}

	.top {
		background-color: #fff;
		position: relative;

		&:before {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 4rpx;
			background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
			background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
			background-size: 160rpx;
			content: '';
		}

		.status {
			width: 100%;
			margin: 0 auto;
			padding: 10rpx 0;
		}

		.address {
			font-size: 28rpx;
			width: 92%;
			margin: 0 auto;

			.info {
				height: 60rpx;
				line-height: 60rpx;

				span:first-child {
					padding-right: 20rpx;
				}

				span:last-child {}
			}

			.address-info {
				height: 60rpx;
				line-height: 40rpx;
			}
		}
	}

	.goods {
		background-color: #fff;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		.title {
			width: 100%;
			margin: 0 auto;
			color: #666;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid #eee;

			text {
				padding-left: 20rpx;
			}
		}

		.goods-box {
			padding: 0 32rpx;

			.goods-item {
				padding-top: 20rpx;

				.goods-img {
					width: 154rpx;
					height: 154rpx;
					display: inline-block;
					float: left;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goods-info {
					display: inline-block;
					width: 72%;
					font-size: 28rpx;
					float: right;

					.t {
						width: 100%;
						height: 90rpx;

						text:first-child {
							float: left;
							display: -webkit-box;
							overflow: hidden;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 70%;
						}

						text:last-child {
							width: 30%;
							float: right;
							text-align: right;
						}
					}

					.b {
						width: 100%;
						height: 80rpx;
						font-size: 26rpx;

						text:first-child {
							float: left;
							color: #999;
						}

						text:last-child {
							float: right;
							color: #666;
						}
					}
				}
			}
		}
	}

	.order {
		background-color: #fff;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		.title {
			width: 100%;
			margin: 0 auto;
			color: #666;
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid #eee;

			text {
				padding-left: 30rpx;
			}
		}

		.list {
			width: 100%;

			.list-box {
				width: 92%;
				height: auto !important;
				height: 80rpx;
				min-height: 80rpx;
				line-height: 80rpx;
				margin: 0 auto;
				font-size: 26rpx;
				color: #333;
				border-bottom: 2rpx solid #ebedf0;

				view {
					display: inline-block;
				}

				view:first-child {
					float: left;
				}

				view:last-child {
					float: right;
					text-align: left !important;
				}

				textarea {
					height: 150rpx;
				}
			}

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.operation-placeholder {
		width: 100%;
		height: 140rpx;
		line-height: 140rpx;
	}

	.operation {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		text-align: right;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 2rpx solid #eee;

		text {
			font-size: 28rpx;
			text-align: center;
			border-radius: 30rpx;
			background-color: #fff;
			padding: 16rpx 30rpx;
			margin-right: 20rpx;
		}

		text.cancel {
			color: #333;
			border: 2rpx solid #ddd;
		}

		text.pay {
			background-color: #78C0F9;
			color: #fff;
		}

		.confirm {
			color: #fff;
			background-color: #01AAED;
		}

		.refund {
			color: #fff;
			background-color: #FF5722;
		}

		.evaluate {
			color: #fff;
			background-color: #009688;
		}
	}

	.payment-box {
		.payment-item {
			padding: 20rpx 32rpx;
			border-bottom: 2rpx solid #eee;

			view {
				display: inline;
			}

			view:first-child {
				font-size: 28rpx;

				text {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 50%;
					padding: 4rpx;
				}
			}

			view:nth-child(2) {
				font-size: 28rpx;
				padding-left: 20rpx;

				i {
					font-size: 24rpx;
					font-style: normal;
					color: #999;
					padding-left: 20rpx;
				}
			}

			view:nth-child(3) {
				float: right;
				display: none;
				color: #999;
			}

			view.active {
				display: block;
			}

			view.activeColor {
				color: red;
			}
		}

		.wechat {
			position: relative;
			top: 16rpx;
			width: 40rpx;
			height: 40rpx;
			background-repeat: no-repeat;
			background-size: 40rpx 40rpx;
			display: inline-block;
			background-image: url();
		}

		.alipay {
			position: relative;
			top: 16rpx;
			width: 40rpx;
			height: 40rpx;
			background-repeat: no-repeat;
			background-size: 40rpx 40rpx;
			display: inline-block;
			background-image: url();
		}

		.appleiap {
			position: relative;
			top: 16rpx;
			width: 40rpx;
			height: 40rpx;
			background-repeat: no-repeat;
			background-size: 40rpx 40rpx;
			display: inline-block;
			background-image: url();
		}

		.balance {
			position: relative;
			top: 16rpx;
			width: 40rpx;
			height: 40rpx;
			background-repeat: no-repeat;
			background-size: 40rpx 40rpx;
			display: inline-block;
			background-image: url();
		}

		.check {
			position: relative;
			top: 12rpx;
			width: 40rpx;
			height: 40rpx;
			background-repeat: no-repeat;
			background-size: 40rpx 40rpx;
			display: inline-block;
			background-image: url();
		}
	}
</style>